// import React from 'react';
import React, { Component } from 'react'
import "./index.less";
import { Select, DatePicker, Tag, Space, Tabs, Table, Button, Switch, Image } from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
import { PageContainer } from '@ant-design/pro-layout';
function handleChange(value) {
    console.log(`selected ${value}`);
}

const columns = [
    // 商品图片
    {
        title: '商品图片',
        dataIndex: 'img',
        key: 'img',
        render: url => <div className="tupian">
            <Image
                width={75}
                height={75}
                src={url}
            />
        </div>,
    },
    // 商品名称
    {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
    },
    // 评价内容
    {
        title: '评价内容',
        dataIndex: 'title',
        key: 'title',
    },
    // img图片数组
    {
        title: '评价图片',
        key: 'imgs',
        dataIndex: 'imgs',
        render: imgs => (
            <>
                {imgs.map((tag, index) => {
                    return (
                        <div className="imgs">
                            <Image
                                width={75}
                                height={75}
                                src={tag}
                            />
                        </div>
                    );
                })}
            </>
        ),
    },
    {
        title: '状态',
        key: 'zuangtai',
        dataIndex: 'zt',
        render: zt => <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space size="middle">
                <Button>删除</Button>
            </Space>
        ),
    },
];
const data = [
    {
        key: '1',
        img: 'https://img2.baidu.com/it/u=2108319215,1494231136&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=690',
        name: "华为",
        title: '哈哈哈哈很好',

        imgs: [
            'https://img0.baidu.com/it/u=680024841,633688659&fm=26&fmt=auto&gp=0.jpg',
            'https://img1.baidu.com/it/u=2484976523,2471795298&fm=26&fmt=auto'
        ],
        zt: true,
    },
    {
        key: '2',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw690%2F71f8e28dgy1gte3s6s2c5j20m80m8mzw.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634466951&t=b2ff687ad369cc7c5e821b63b9c80bcd',
        name: "苹果",
        title: '垃圾苹果手机',
        imgs: ['https://img1.baidu.com/it/u=3506409215,200882099&fm=26&fmt=auto&gp=0.jpg'],
        zt: true,
    },
    {
        key: '3',
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic27.nipic.com%2F20130125%2F8952533_225500143000_2.jpg&refer=http%3A%2F%2Fpic27.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634466951&t=176f5284c329b3b607d84369ca71e205',
        name: "菠萝",
        title: '山寨手机 就是牛',
        imgs: [
            'https://img1.baidu.com/it/u=1713775829,3234503347&fm=26&fmt=auto',
        ],
        zt: true,
    },
];

export default class index extends Component {
    state = {
        selectedRowKeys: [], // Check here to configure the default column
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                Table.SELECTION_NONE,

            ],
        };

        return (
            <PageContainer>
                <div className="warp">
                    <div className="main">
                        <div className="list">
                            <Table columns={columns} dataSource={data} />                        </div>
                    </div>

                </div>
            </PageContainer>
        )
    }
}
